<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" href="images/favicon.png"/>
        <title>相册</title>

        <link href="css/scrolling-nav.css" rel="stylesheet" media="all">
        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/magnific-popup.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="css/style.css" rel="stylesheet">
        <link href="css/responsive.css" rel="stylesheet">
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/instafeed.min.js" type="text/javascript"></script>
        <script src="js/custom.js" type="text/javascript"></script>
    </head>
    <body id="myPage">
        <div class="section-page-wrap">
            <div class="share">
                <div class="icon first facebook"><i class="fa fa-facebook"></i></div>
                <div class="icon twitter"><i class="fa fa-twitter"></i></div>
                <div class="icon google-plus"><i class="fa fa-google-plus"></i></div>
                <div class="icon pinterest last"><i class="fa fa-pinterest-p"></i></div>
                <div class="label">分享</div>
            </div>
            <header class="top-nav-bar">
                <div id="toggle">
                    <div class="one"></div>
                    <div class="two"></div>
                    <div class="three"></div>
                </div>

                <div id="menu">
                    <ul class="menu-view list-unstyled">
                        <li><a href="index.html"><img src="images/icons/home.png" onmouseover="this.src = 'images/icons/home-hover.png'" onmouseout="this.src = 'images/icons/home.png'"></a></li>
                        <li><a href="about.html"><img src="images/icons/about.png" onmouseover="this.src = 'images/icons/about-hover.png'" onmouseout="this.src = 'images/icons/about.png'"></a></li>
                        <li class="active"><a><img src="images/icons/portfolio-hover.png"></a></li>
                        <li><a href="contact.html"><img src="images/icons/contact.png" onmouseover="this.src = 'images/icons/contact-hover.png'" onmouseout="this.src = 'images/icons/contact.png'"></a></li>   
                    </ul>
                </div>

            </header>
            <div class="banner-full-image">
                <div class="banner-title">
                    <h1>Running Man</h1>
                    <a class="btn btn-primary" href="about.html">了解更多</a>
                </div>
            </div>

            <!------------portfolio--------------------->
            <section id="gallery-block" class="section-padding">
                <div class="container">
                    <div class="text-head">
                        <h2>成员相册</h2>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-sm-4 col-xs-12 gallery-list">
                            <div class="port-image">
                                <img src="images/gallery-image1.png" alt="Gallery-Image" class="img-responsive">
                                <div class="overlay">
                                    <div class="text"><a href="images/gallery-image1.png" class="image-popup"><img src="images/pin.png"></a></div>
                                </div>
                            </div>
                            <h1 class="port-title">刘在石</h1>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12 gallery-list">
                            <div class="port-image">
                                <img src="images/gallery-image2.png" alt="Gallery-Image" class="img-responsive">
                                <div class="overlay">
                                    <div class="text"><a href="images/gallery-image2.png" class="image-popup"><img src="images/pin.png"></a></div>
                                </div>
                            </div>
                            <h1 class="port-title">李光洙</h1>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12 gallery-list">
                            <div class="port-image">
                                <img src="images/gallery-image3.png" alt="Gallery-Image" class="img-responsive">
                                <div class="overlay">
                                    <div class="text"><a href="images/gallery-image3.png" class="image-popup"><img src="images/pin.png"></a></div>
                                </div>
                            </div>
                            <h1 class="port-title">宋智孝</h1>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12 gallery-list">
                            <div class="port-image">
                                <img src="images/gallery-image4.png" alt="Gallery-Image" class="img-responsive">
                                <div class="overlay">
                                    <div class="text"><a href="images/gallery-image4.png" class="image-popup"><img src="images/pin.png"></a></div>
                                </div>
                            </div>
                            <h1 class="port-title">金钟国</h1>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12 gallery-list">
                            <div class="port-image">
                                <img src="images/gallery-image5.png" alt="Gallery-Image" class="img-responsive">
                                <div class="overlay">
                                    <div class="text"><a href="images/gallery-image5.png" class="image-popup"><img src="images/pin.png"></a></div>
                                </div>
                            </div>
                            <h1 class="port-title">HAHA</h1>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12 gallery-list">
                            <div class="port-image">
                                <img src="images/gallery-image6.png" alt="Gallery-Image" class="img-responsive">
                                <div class="overlay">
                                    <div class="text"><a href="images/gallery-image6.png" class="image-popup"><img src="images/pin.png"></a></div>
                                </div>
                            </div>
                            <h1 class="port-title">池石镇</h1>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12 gallery-list">
                            <div class="port-image">
                                <img src="images/gallery-image7.png" alt="Gallery-Image" class="img-responsive">
                                <div class="overlay">
                                    <div class="text"><a href="images/gallery-image7.png" class="image-popup"><img src="images/pin.png"></a></div>
                                </div>
                            </div>
                            <h1 class="port-title">全昭旻</h1>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12 gallery-list">
                            <div class="port-image">
                                <img src="images/gallery-image8.png" alt="Gallery-Image" class="img-responsive">
                                <div class="overlay">
                                    <div class="text"><a href="images/gallery-image8.png" class="image-popup"><img src="images/pin.png"></a></div>
                                </div>
                            </div>
                            <h1 class="port-title">梁世赞</h1>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12 gallery-list">
                            <div class="port-image">
                                <img src="images/gallery-image9.png" alt="Gallery-Image" class="img-responsive">
                                <div class="overlay">
                                    <div class="text"><a href="images/gallery-image9.png" class="image-popup"><img src="images/pin.png"></a></div>
                                </div>
                            </div>
                            <h1 class="port-title">Gray</h1>
                        </div>
                    </div>
                </div>
            </section>

            <!---------insta images block--------->
            <section id="insta-post" class="section-padding">
                <div class="container">
                    <div class="text-head">
                      <!--   <h2 >our instagram post</h2> -->
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12 insta-image-list">
                            <div id="instafeed"></div>
                        </div>
                    </div>
                </div>
            </section>
            <!--------End------------------>
            <!---footer--->
            <footer>
                <div class="container text-center">
                    <div class="copyright">
                        <!--Do not remove Backlink from footer of the template. To remove it you can purchase the Backlink-->
                       <!--  &copy; 2017 All right reserved. Designed by <a href="#" target="_blank">ThemeVault.</a> -  More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a> -->
                    </div>
                </div>
            </footer>
            <div id="back-to-top" style="display: none">
                <i class="fa fa-angle-double-up" aria-hidden="true"></i> Top
            </div>
        </div>

        <script src="js/jquery.magnific-popup.min.js"></script>
        <script>
                            jQuery(document).ready(function ($) {
                                $('.image-popup').magnificPopup({
                                    type: 'image',
                                    removalDelay: 300,
                                    mainClass: 'mfp-with-zoom',
                                    titleSrc: 'title',
                                    gallery: {
                                        enabled: true
                                    },
                                    zoom: {
                                        enabled: true, // By default it's false, so don't forget to enable it

                                        duration: 300, // duration of the effect, in milliseconds
                                        easing: 'ease-in-out', // CSS transition easing function

                                        // The "opener" function should return the element from which popup will be zoomed in
                                        // and to which popup will be scaled down
                                        // By defailt it looks for an image tag:
                                        opener: function (openerElement) {
                                            // openerElement is the element on which popup was initialized, in this case its <a> tag
                                            // you don't need to add "opener" option if this code matches your needs, it's defailt one.
                                            return openerElement.is('img') ? openerElement : openerElement.find('img');
                                        }
                                    }
                                });
                            });
        </script>
        <script>
            $(document).ready(function () {
                var myButton = $('#mybutton');
                var userFeed = new Instafeed({
                    get: 'user',
                    userId: '4828631159',
                    accessToken: '4828631159.1677ed0.79cec29b3ab94404ad45f640b87dc4ef',
                    limit: '12',
                    sortBy: 'most-recent',
                    after: function () {
                        var images = $("#instafeed").find('a');
                        $.each(images, function (index, image) {
                            var delay = (index * 75) + 'ms';
                            $(image).css('-webkit-animation-delay', delay);
                            $(image).css('-moz-animation-delay', delay);
                            $(image).css('-ms-animation-delay', delay);
                            $(image).css('-o-animation-delay', delay);
                            $(image).css('animation-delay', delay);
                            $(image).addClass('animated flipInX');
                        });

                    },
                    template: ' <div class="col-md-2 col-sm-3 col-xs-6"><div class="insta-image"><a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="likes">&hearts; {{likes}}</div></a></div></div>'
                });
                userFeed.run();
            });
        </script>
    </body>
</html>
